/* 参与者--查看全部 */
import React, { Component } from "react";
import { observer } from "mobx-react";
import {
  WeaDialog,
  WeaTab,
  WeaTools,
  WeaNewScroll,
  WeaMoreButton,
  WeaLocaleProvider,
  WeaPopoverHrm,
} from "ecCom";
import { WeaTableNew } from "comsMobx";
import CoworkConstant from "../../../util/CoworkConstant";
import * as CoworkUtil from "../../../util/CoworkUtil";

const { WeaTable, TableStore } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class Participation extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = "cowork-detail-participation";
    this.tableStore = new TableStore();
    this.id = props.id || "";
    this.state = {
      selectedKey: "parter",
      showSearchAd: false,
    };
  }

  componentDidMount() {
    if (this.props.type) {
      /* eslint-disable */
      this.setState({ selectedKey: this.props.type }, () => {
        this.getDatas({}, {}, true);
      });
      /* eslint-enable */
    } else {
      this.getDatas({}, {}, true);
    }
  }

  // 列表数据
  onGetListData = (params = {}, isInitPage = false) => {
    const {
      store: { adSearchForm },
    } = this.props;
    let formParams = adSearchForm ? adSearchForm.getFormParams() : {};
    let listUrl = "";
    params = {
      coworkid: this.id,
      ...formParams,
      ...params,
    };
    switch (this.state.selectedKey) {
      case "parter":
        listUrl = "getCoworkParterList";
        break;
      case "unread":
        listUrl = "getCoworkUnreadList";
        break;
      case "quiter":
        listUrl = "getCoworkQuiterList";
        break;
      default:
        break;
    }

    WeaTools.callApi(
      `/api/cowork/participation/${listUrl}`,
      "GET",
      params
    ).then((res) => {
      if (res.sessionkey) {
        isInitPage
          ? this.tableStore.getDatas(res.sessionkey, 1, "", {
              orderkey: "",
              sortOrder: "",
            })
          : this.tableStore.getDatas(res.sessionkey);
      }
    });
  };

  onSearch = () => this.onGetListData({}, true);

  getDatas = (adSearchParams = {}, listParams = {}, isInitPage = false) => {
    const {
      store: { onGetAdSearchData },
    } = this.props;
    const params = {
      conditionType: this.state.selectedKey,
      ...adSearchParams,
    };
    onGetAdSearchData(params, () => {
      this.onGetListData(listParams, isInitPage);
    });
  };

  setShowSearchAd = (bool) => this.setState({ showSearchAd: bool });

  onCancel = () => {
    const { onCancel } = this.props;
    onCancel && onCancel();
  };

  onEnterSearch = () => {
    this.setState({ showSearchAd: false });
    this.onSearch();
  };

  searchsAd = (form, fileds) =>
    CoworkUtil.getSearchs(form, fileds, this.onEnterSearch);

  onAdReset = () => {
    const {
      store: { adSearchForm },
    } = this.props;
    adSearchForm.resetForm();
  };

  onTabChange = (key) => {
    this.setState({ selectedKey: key }, () => {
      this.getDatas({}, {}, true);
    });
  };

  onSearchChange = (v) => {
    const {
      store: { adSearchForm },
    } = this.props;
    adSearchForm.updateFields({ lastname: { value: v } });
  };

  getColumns = (columns) => {
    let _columns;

    _columns = columns.map((column) => {
      if (column.dataIndex === "lastname") {
        column.render = (text, record) => (
          <WeaPopoverHrm>
            <a
              href={`javaScript:openhrm(${record.id});`}
              onClick={(e) => window.pointerXY(e)}
              title={text}
            >
              {text}
            </a>
          </WeaPopoverHrm>
        );
      }

      return column;
    });

    return _columns;
  };

  render() {
    const {
      visible,
      store: { adSearchForm, adSearchFileds },
    } = this.props;
    const { selectedKey, showSearchAd } = this.state;
    let searchsBaseValue = "";
    const topTab = [
      { title: getLabel(17689, "参与者"), key: "parter" },
      { title: getLabel(17696, "未查看者"), key: "unread" },
      { title: getLabel(382659, "已退出人员"), key: "quiter" },
    ];
    const dialogBtns = [
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ""
        }_WeaMoreButton@izi6cd@participationMore`}
      />,
    ];

    if (adSearchForm) {
      const { lastname } = adSearchForm.getFormParams();
      searchsBaseValue = lastname;
    }

    return (
      <WeaDialog
        ecId={`${
          (this && this.props && this.props.ecId) || ""
        }_WeaDialog@0ppdf8`}
        title={getLabel(83274, "参与情况")}
        visible={visible}
        icon={CoworkConstant.iconClassName}
        iconBgcolor={CoworkConstant.iconBgColor}
        onCancel={this.onCancel}
        className={this.prefixCls}
        style={{ width: 800, height: 565 }}
        buttons={dialogBtns}
      >
        <div className={`${this.prefixCls}-container`}>
          <WeaTab
            ecId={`${
              (this && this.props && this.props.ecId) || ""
            }_WeaTab@1djsum`}
            datas={topTab}
            keyParam="key"
            selectedKey={selectedKey}
            searchType={["base", "advanced"]}
            showSearchAd={showSearchAd}
            setShowSearchAd={this.setShowSearchAd}
            searchsAd={this.searchsAd(adSearchForm, adSearchFileds)}
            advanceHeight={200}
            onChange={this.onTabChange}
            searchsBaseValue={searchsBaseValue}
            onSearchChange={this.onSearchChange}
            onSearch={this.onSearch}
            onAdSearch={this.onSearch}
            onAdReset={this.onAdReset}
          />
          <div className={`${this.prefixCls}-container-scroll`}>
            <WeaNewScroll
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_WeaNewScroll@i4kn48`}
              height={"100%"}
            >
              <WeaTable
                ecId={`${
                  (this && this.props && this.props.ecId) || ""
                }_WeaTable@x5nm14`}
                comsWeaTableStore={this.tableStore}
                getColumns={this.getColumns}
                className={`${this.prefixCls}-container-table`}
                hasOrder
              />
            </WeaNewScroll>
          </div>
        </div>
      </WeaDialog>
    );
  }
}
